<template>
  <div>
<h1>景区一览</h1>
  <el-row justify="center">
    <el-input v-model="input" size="large" style="width: 400px" placeholder="请输入景点名称搜索">
      <template #suffix>
        <i  :class="[!loading ? 'iconfont icon-sousuo' : 'iconfont icon-jiazai1 tra']"></i>
      </template>
    </el-input>
  </el-row>
  <el-divider/>
    <div style="text-align: right">
      <div style="text-align: left" v-if="type!==''">
        正在查看:{{scenicTypes[type]}}&nbsp;
        <el-button @click="cancelType" type="text" size="small">取消</el-button>
      </div>
      <el-button @click="handleClick('FLOWER')" size="small">花</el-button>
      <el-button @click="handleClick('TREE')" size="small">树</el-button>
      <el-button @click="handleClick('KIOSK')" size="small">亭</el-button>
      <el-button @click="handleClick('LAKE')" size="small">湖</el-button>
      <el-button @click="handleClick('HILL')" size="small">山</el-button>
    </div>
  <el-divider/>
  <hot-scenic :scenic="scenic"/>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[9, 18, 36, 72]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>
  </div>
</template>

<script>
import HotScenic from "@/views/scenic/hotScenic";
import {getScenicAndImage, searchScenicByType, searchScenicImage} from "@/api/multimedia";
import {getDevice} from "@/utils/get-device";
export default {
  name: "scenic",
  components: {HotScenic},
  data(){
    return{
      layout:'total, sizes, prev, pager, next, jumper',
      type:'',
      scenicTypes:{'LAKE':'湖','FLOWER':'花','KIOSK':'亭','HILL':'山','TREE':'树'},
      loading:false,
      scenic:[],
      pageSize:9,
      total:0,
      currentPage:1,
      input:'',
      timeout:''
    }
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getScenic()
  },
  watch: {
    input(newVal) {
      clearTimeout(this.timeout)
      if (newVal !== '') {
        this.timeout = setTimeout(() => {
          this.searchScenicByName(newVal)
        }, 2000)
      }else {
        this.getScenic()
        this.loading=false
      }
    }
  },
  methods:{
    handleClick(scenicType){
      this.input=''
      this.type=scenicType
      this.searchByType()
    },
    getScenic(){
      getScenicAndImage(this.currentPage,this.pageSize).then(res=>{
        this.scenic=res.data.scenicList
        this.total=res.data.total
      })
    },
    searchScenicByName(name){
      this.loading=true
      searchScenicImage(name,this.currentPage,this.pageSize).then(res=>{
        this.scenic=res.data.scenicList
        this.total=res.data.total
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      //当输入框空时进行搜索
      if (this.input!==''){
        this.searchScenicByName(this.input)
      }else if (this.type!==''){
        this.searchByType()
      }else {
        this.getScenic()
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      //当输入框空时进行搜索
      if (this.input!==''){
        this.searchScenicByName(this.input)
      }else if (this.type!==''){
        this.searchByType()
      }else {
        this.getScenic()
      }
    },
    searchByType(){
      searchScenicByType(this.type,this.currentPage,this.pageSize).then(res=>{
        this.scenic=res.data.scenicList
        this.total=res.data.total
      })
    },
    cancelType(){
      this.type=''
      this.getScenic()
    }
  }
}
</script>

<style scoped>
.tra{
  animation: rotate 6s linear infinite;
}
</style>
